<template>
    <div>
        <!-- 搜索栏 -->
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户信息">
                    <div class="w-[250px]">
                        <el-input
                            v-model="queryParams.user"
                            placeholder="请输入用户昵称/编号"
                            clearable
                            @keyup.enter="resetPaging"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="智能体名">
                    <div class="w-[250px]">
                        <el-input
                            v-model="queryParams.bot"
                            placeholder="请输入智能体编号"
                            clearable
                            @keyup.enter="resetPaging"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="创建时间">
                    <date-picker
                        v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPaging">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <div>
                <el-button
                    :disabled="selectData.length <= 0"
                    v-perms="['agent:chat:dialog:delete']"
                    @click="handleDelete(selectData)"
                    class="!mb-4"
                >
                    批量删除
                </el-button>
            </div>
            <el-table :data="pager.lists" size="large" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="用户信息" prop="user" min-width="150">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-avatar :size="50" :src="row?.user?.avatar" class="shrink-0" />
                            <div class="grid ml-2">
                                <p class="line-clamp-1">{{ row?.user?.nickname }}</p>
                                <el-popover
                                    :content="row?.user?.sn"
                                    effect="dark"
                                    placement="top-start"
                                >
                                    <template #reference>
                                        <p class="text-xs text-tx-placeholder line-clamp-1">
                                            {{ row?.user?.sn }}
                                        </p>
                                    </template>
                                </el-popover>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="提问问题" prop="question" min-width="150" show-tooltip-when-overflow />
                <el-table-column label="消耗积分" prop="use_tokens" min-width="100" />
                <el-table-column label="消耗Tokens" prop="use_points" min-width="100" />
                <el-table-column label="知识引用" prop="quotes" min-width="100">
                    <template #default="{ row }">
                        <el-tag type="info"  @click="handlePopup(row, 'quotes')">
                            {{ row?.quotes.length }}条
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="上下文数" prop="context" min-width="100">
                    <template #default="{ row }">
                        <el-tag type="info" @click="handlePopup(row, 'context')">
                            {{ row?.context.length }}条
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="来源渠道" prop="scene" min-width="100" />
                <el-table-column label="所属智能体" prop="robot" min-width="150" />
                <el-table-column label="对话模型" prop="chat_model" min-width="150">
                    <template #default="{ row }">
                        <el-tag type="info">{{ row?.chat_model }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="执行耗时" prop="task_time" min-width="100" />
                <el-table-column label="提问时间" prop="create_time" min-width="180" />
                <el-table-column label="操作" width="140" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['agent:chat:dialog:detail']"
                            type="primary"
                            link
                            @click="handlePopup(row, 'detail')"
                        >
                            查看详情
                        </el-button>
                        <el-button
                            v-perms="['agent:chat:dialog:delete']"
                            type="danger"
                            link
                            @click="handleDelete([row.id])"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>

        <!-- 详情弹窗 -->
        <popup-detail :show="popShowDetail" :details="details" @close="popShowDetail = false" />

        <!-- 引用弹窗 -->
        <popup-quotes :show="popShowQuotes" :quotes="details.quotes" @close="popShowQuotes = false" />

        <!-- 上下文弹窗 -->
        <popup-context :show="popShowContext" :context="details.context" @close="popShowContext = false" />

    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import chatDialogApi from '@/api/agent/chat/dialog'
import PopupDetail from './_components/popup-detail.vue'
import PopupQuotes from './_components/popup-quotes.vue'
import PopupContext from './_components/popup-context.vue'

// 查询参数
const queryParams = reactive({
    bot: '',
    user: '',
    is_disable: '',
    start_time: '',
    end_time: ''
})

// 分页查询
const { pager, queryLists, resetParams, resetPaging } = usePaging({
    fetchFun: chatDialogApi.lists,
    params: queryParams
})

// 详情信息
const popShowDetail = ref<boolean>(false)
const popShowQuotes = ref<boolean>(false)
const popShowContext = ref<boolean>(false)
const details = ref<any>({})

/**
 * 表格勾选
 */
const selectData = ref<number[]>([])
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map((item) => item.id)
}

/**
 * 处理弹窗
 *
 * @param row
 * @param type
 */
const handlePopup = (row: any, type: string) => {
    details.value = row
    switch (type) {
        case 'detail':
            popShowDetail.value = true
            break
        case 'quotes':
            popShowQuotes.value = true
            break
        case 'context':
            popShowContext.value = true
            break
    }
}

/**
 * 处理删除
 *
 * @param {number[]} ids
 * @returns {Promise<void>}
 */
const handleDelete = async (ids: number[]): Promise<void> => {
    feedback.confirm('确定要删除此项数据吗?')
        .then(async () => {
            await chatDialogApi.delete(ids)
            feedback.msgSuccess('删除成功')
            await queryLists()
        }).catch(() => {})
}

onMounted(async () => {
    await queryLists()
})
</script>
